<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" style="border: 1px solid red"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      const centerPointX = canvas.width / 2;
      const centerPointY = canvas.height / 2;
      const radius = canvas.height / 2 - 10;

      function drawClock() {
        drawClockFace();

        // ctx.fillStyle = "skyblue";
        // ctx.fillRect(0, 0, 50, 50);

        drawNumbers();

        drawTime();
      }

      function drawClockFace() {
        const rg = ctx.createRadialGradient(
          0,
          0,
          radius - 0.95,
          0,
          0,
          radius * 1.05
        );
        rg.addColorStop(0, "#333");
        rg.addColorStop(0.5, "white");
        rg.addColorStop(1, "#333");

        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();

        ctx.strokeStyle = rg;
        ctx.lineWidth = radius * 0.1;
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
        ctx.fillStyle = "#333";
        ctx.fill();
      }

      function drawNumbers() {
        ctx.font = radius * 0.15 + "px arial";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.fillStyle = "black";

        for (let i = 1; i < 13; i++) {
          let ang = (i * Math.PI) / 6;
          ctx.rotate(ang);
          ctx.translate(0, -radius * 0.85);
          ctx.rotate(-ang);
          ctx.fillText(i, 0, 0);
          ctx.rotate(ang);
          ctx.translate(0, radius * 0.85);
          ctx.rotate(-ang);
        }
      }

      function drawTime() {
        const now = new Date();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();

        // 公共常量定义
        const HOUR_ANGLE = Math.PI / 6; // 每小时30度
        const MINUTE_ANGLE = Math.PI / 30; // 每分钟6度
        const SECOND_ANGLE = Math.PI / 30; // 每秒6度

        hour = hour % 12;

        let hourAngle =
          hour * HOUR_ANGLE +
          (minute / 60) * HOUR_ANGLE +
          (second / 3600) * HOUR_ANGLE;
        let minuteAngle = minute * MINUTE_ANGLE + (second / 60) * MINUTE_ANGLE;
        let secondAngle = second * SECOND_ANGLE;

        // 坐标系转换（调整为12点方向为0度）
        hourAngle = hourAngle - Math.PI / 2;
        minuteAngle = minuteAngle - Math.PI / 2;
        secondAngle = secondAngle - Math.PI / 2;

        drawLine(hourAngle, radius * 0.5, radius * 0.09);
        drawLine(minuteAngle, radius * 0.7, radius * 0.07);
        drawLine(secondAngle, radius * 0.9, radius * 0.05);
      }

      function drawLine(angle, radius, width) {
        ctx.beginPath();
        ctx.lineWidth = width;
        ctx.strokeStyle = "black";
        ctx.lineCap = "round";
        ctx.moveTo(0, 0);
        ctx.lineTo(radius * Math.cos(angle), radius * Math.sin(angle));
        ctx.stroke();
      }

      // 绘制背景
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, 300, 150);

      // 变换坐标
      ctx.translate(centerPointX, centerPointY);
      setInterval(drawClock, 1e3);
    </script>
  </body>
</html>
